<template>
    <div>
        日历.....
        <div class="calendar">
            <!-- 周末数 -->
            <div class="weekends">
                <span v-for="item in weekends" :key="item">{{ item }}</span>
            </div>
            <!-- 本月天数 -->
            <div class="days"></div>
        </div>

    </div>

    <!-- 照片 -->
</template>

<script setup>
import { nowTimestamp, formatDate, formatTime, lastMonth, thisMonth, lastMonthSomeDay, nextMonthSomeDay, getStartWeek, getMonthDays } from '@/utils/date';
import { ref } from 'vue';

const weekends = ['一', '二', '三', '四', '五', '六', '日']

let d = nowTimestamp()
console.log(d);
console.log(formatDate(d));
console.log(formatTime(d));
console.log(lastMonth());
console.log(thisMonth());
console.log(lastMonthSomeDay(10));
console.log(nextMonthSomeDay(3));
console.log(getStartWeek());
console.log(getMonthDays());



</script>

<style lang="scss" scoped>
.calendar {
    width: 721px;
    border: red 1px solid;
    padding: 10px;
    box-sizing: border-box;

    .weekends {
        display: flex;

        &>span {
            width: calc(100% / 7);
            height: 101px;
            border-right: 1px solid pink;
            /* 右边框 */
            border-top: 1px solid pink;
            /* 上边框 */
            border-bottom: 1px solid pink;
            /* 下边框 */
        }

        &>span:first-child {
            border-left: 1px solid pink;
            /* 第一个元素的左边框 */
        }


    }

    .days {
        width: calc(100% / 7);
        height: 100px;
        border: blue;
    }

}
</style>